<script setup lang="tsx">
import { LyTable } from "@/components/Table";
import { ElButton, ElInput } from "element-plus";
import { ref } from "vue";

const lyTableRef = ref<any>(null);

const columns = ref<any>([
  {
    prop: "id",
    label: "多选",
    align: "center",
    type: "selection",
  },
  {
    prop: "index",
    label: "序号",
    align: "center",
    width: "180",
    // hidden: true,
    renderHeader: (scope: any) => {
      scope
      // console.log("scope", scope);
      return <>序号</>;
    },
    render: (row: any, index: number) => {
      row
      return ++index;
    },
  },
  {
    prop: "name",
    label: "姓名",
    headerAlign: "",
    // align: "center",
  },
  {
    prop: "age",
    label: "年龄",
  },
  {
    prop: "address1",
    label: "地址1",
  },
  {
    prop: "address2",
    label: "地址2",
  },
  {
    prop: "address3",
    label: "地址3",
  },
  {
    prop: "address4",
    label: "地址4",
  },
  {
    prop: "address5",
    label: "地址5",
  },
  {
    prop: "operate",
    label: "操作",
    render: () => {
      // console.log("scope", row);
      // console.log("scope", index);
      // console.log("scope", scope);
      return (
        <>
          <ElButton type="primary">编辑</ElButton>
        </>
      );
    },
  },
]);

const data = ref([
  {
    id: 1,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
    children: [
      { id: 4, name: "张三11", age: 18, address: "北京", date: "2020-01-01" },
      { id: 5, name: "张三11", age: 18, address: "北京", date: "2020-01-01" },
    ],
  },
  {
    id: 2,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 3,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 4,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 5,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 6,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 7,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },


  {
    id: 8,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 9,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 10,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 11,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 12,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 13,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },  {
    id: 14,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 15,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 16,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 17,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 18,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 19,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 20,
    name: "张三",
    age: 11,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 12,
    name: "张三",
    age: 18,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 22,
    name: "张三",
    age: 13,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 23,
    name: "张三",
    age: 14,
    address: "北京",
    date: "2020-01-01",
  },
  {
    id: 24,
    name: "张三",
    age: 15,
    address: "北京",
    date: "2020-01-01",
  },
]);

const params = ref({
  name: "",
});

const currentChange = (a: any) => {
  console.log(a);
};

const openColumnSetting = () => {
  lyTableRef.value.openColumnSetting();
};

const page = {
  pageSize: 10,
  align: "top-left",
};

const updateColumnSetting = (data: any) => {
  columns.value = data;
};

let tableOption = ref({
  columns,
  data,
  page,
  showOverflowTooltip: true,
  rowKey: "id",
});

</script>

<template>
  <LyTable ref="lyTableRef" @updateColumnSetting="updateColumnSetting" v-bind="tableOption"
    @currentChange="currentChange">
    <template #tableTop>
      <div class="table-top">
        <div class="table-top-left">
          <el-button @click="" type="" icon="Refresh" />
          <el-button @click="" type="primary">添加</el-button>
          <el-button type="primary">批量修改</el-button>
          <el-button type="danger">批量删除</el-button>
          <el-button type="primary" plain @click="openColumnSetting" icon="Tools"></el-button>
        </div>
        <div class="table-top-right">
          <el-input clearable v-model="params.name" placeholder="请输入" />
        </div>
      </div>
    </template>
  </LyTable>
</template>

<style lang="less" scoped>
.table-top {
  display: flex;
  justify-content: space-between;
}
</style>
